<template>
	<view class="bgcimg">
		<view class="body">
			<view class="return" @click="returnpage">
				<image src="../../static/imags/login/return.png" mode=""></image>
			</view>
			<view class="logintext">注册</view>
			<view class="loginmsg ">
				<!-- 输入框 -->
				<view class="logininput">
					<input type="number" placeholder="请输入手机号" v-model="mobile">
				</view>
				<view class="logininput flexbetween">
					<input type="text" placeholder="请输入验证码" v-model="yzm_code">
					<view class="getcode"  @click="sendcode">{{codetext}}</view>
				</view>
				<view class="logininput">
					<input type="password" placeholder="请输入密码" v-model="password">
				</view>
				<view class="logininput">
					<input type="number" placeholder="请输入推荐人手机号(必填)" v-model="yq_mobile">
				</view>
				<view class="loginbtn btn" @click="regist">注册</view>
			</view>
		</view>
		<view class="bottom flexcolumn">
			<view class="gongsimsg flexcenter">
				<view class="gslogo">
					<image :src="Config.gs_logo" mode=""></image>
				</view>
				<text>{{Config.gs_name}}</text>
			</view>
			<view class="contract" @click="phone(Config.gs_tel)">{{Config.gs_tel}}</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				mobile:"",
				yzm_code:"",
				password:"",
				yq_mobile:"",
				codetext:"获取验证码",
				Config:{}
			}
		},
		onLoad() {
			this.getConfigInfo()
		},
		methods: {
			getConfigInfo(){
				httpRequest.request('/employeesapi/index/getConfigInfo', 'GET', {
				}).then(resp => {
					this.Config = resp.data
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			// 发送验证码
			sendcode() {
				let _this = this
				let mobile = _this.mobile;
				if (mobile=="") {
					httpRequest.toast("请输入手机号");
					return false;
				}
				if (!mobile.match(/^1\d{10}$/)) {
					httpRequest.toast("请输入有效的手机号码");
					return false;
				}
				httpRequest.request('/api/sms/send', 'POST', {
					mobile: mobile,
					event: "ygregister"
				}).then(resp => {
					if (resp.code == 1) {
						var i = 60;
						var timer = setInterval(function() {
							_this.codetext = i + "秒";
							if (i < 1) {
								clearInterval(timer);
								_this.codetext = "获取验证码";
							} else {
								i--;
							}
						}, 1000)
			
					} else if (resp.code == 0) {
						httpRequest.toast(resp.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				})
			},
			// 立即注册
			regist(){
				let _this = this
				let mobile = _this.mobile;
				if (mobile=="") {
					httpRequest.toast("请输入手机号");
					return false;
				}
				if (!mobile.match(/^1\d{10}$/)) {
					httpRequest.toast("请输入有效的手机号码");
					return false;
				}
				if(this.yzm_code==""){
					httpRequest.toast("请输入验证码");
					return false;
				}
				if(this.password==""){
					httpRequest.toast("请输入密码");
					return false;
				}
				if(this.yq_mobile==""){
					httpRequest.toast("请输入推荐人手机号");
					return false;
				}
				httpRequest.request('/employeesapi/user/register', 'POST', {
					mobile: this.mobile,
					password: this.password,
					code:this.yzm_code,
					rec_mobile:this.yq_mobile
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1000)
					}
					if (res.code == 0) {
						httpRequest.toast(res.msg);
					}
				})
			},
			
			returnpage(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.return{
		padding-top: 100rpx;
		width: 20rpx;height: 36rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	// 主背景
	.bgcimg {
		background-image: url("https://phnompenh.yuntaiqi.com/uploads/20220706/ec226cb339478e7f513a29a74a011368.png");
		background-size: cover;
		width: 100%;
		min-height: 100vh;
		background-size: 100%;
	}

	.body {
		padding: 0 68rpx;
		width: 100%;
		box-sizing: border-box;
	}

	// 顶部大字
	.logintext {
		font-size: 80rpx;
		padding-top: 100rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #3476fe;
	}

	// 登录内容开始
	.loginmsg {
		margin-top: 160rpx;
	}

	// 输入框
	.logininput {
		margin-top: 60rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #CECECE;
	}
	// 获取验证码
	.getcode{
		width: 190rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		background-color: #3476fe;
		text-align: center;
		border-radius: 10rpx;
	}
	// 登录按钮
	.btn {
		width: 100%;
		padding: 30rpx 0;
		border-radius: 100rpx;
		text-align: center;
	}

	.loginbtn {
		margin-top: 70rpx;
		background-color: #3476fe;
		font-size: 36rpx;
		font-weight: 800;
		color: #FFFFFF;
	}
	// 底部
	.bottom{
		position: fixed;
		bottom: 30rpx;
		width: 100%;
		
	}
	.gongsimsg{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.gslogo{
		width: 39rpx;
		height: 32rpx;
		margin-right: 10rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.contract{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
</style>
